<template>
  <div class="playlist">
    <Info :playlist="palylistdetail"></Info>
    <el-tabs v-loading="loading" element-loading-text="Loading..." v-model="activeName" class="demo-tabs">
      <el-tab-pane label="歌曲" name="songs">
        <SongList :song-data="songdata"></SongList>
        <Pagination @page-change="getPlayListSongInfo" :current-page="currentPage" :total="total"
          :page-size="pageSize" />
      </el-tab-pane>
      <el-tab-pane label="评论" name="commond"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import Info from "./Info.vue"
import SongList from "./SongList.vue"
import Pagination from "@/components/common/Pagination.vue"
import type { PlayListDetail, SongsData } from "@/models/playlist.ts"
import { GetPlayListInfo,GetPlayListSong } from "@/api/api.ts"
import { ref, onMounted } from "vue"
import { useRoute } from 'vue-router';
const route = useRoute()
const palylistdetail = ref<PlayListDetail>()
const songdata = ref<SongsData>()
const activeName = ref('songs')
const currentPage = ref(1)//当前页
const pageSize = ref(10)//每页的条数
const total = ref(0)
const loading = ref(true)
onMounted(() => {
  getPlayListInfo()//歌单信息
  getPlayListSongTotal()//歌曲总数
})
/* 获取歌单的基本信息 */
const getPlayListInfo = async () => {
  const id: number = Number(route.query.id);
  await GetPlayListInfo(id).then(res => {
    palylistdetail.value = res.data.playlist
  })
}
/* 页面改变后数据更新 */
const getPlayListSongInfo = async (newPage: number, loadings: boolean) => {
  loading.value = loadings
  const id: number = Number(route.query.id);
  await GetPlayListSong(id, 10, (newPage - 1) * 10).then(res => {
    songdata.value = res.data.songs
    currentPage.value = newPage
  })
  loading.value = false
}
/* 获取总数据条数 */
const getPlayListSongTotal = async () => {
  const id: number = Number(route.query.id)
  await GetPlayListSong(id).then(res => {
    songdata.value = res.data.songs.splice(0, 10)
    total.value = res.data.songs.length
  })
  loading.value = false
}

</script>
<style lang="scss" scoped></style>
